<template>
	<view class="relative">
		<template v-if="type == 'normal'">
			<u-navbar :title="title" leftIconSize="16" :bgColor="bgColor" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" @leftClick="leftClick"></u-navbar>
			<view :style="{'margin-top': (system.statusBarHeight + 44) + 'px'}">
				<slot></slot>
			</view>
		</template>
		<template v-else-if="type == 'noHeader'">
			<image :src="bgUrl" class="absolute top-0 w-full" :style="{height: (210 + system.statusBarHeight) + 'px'}"></image>
			<view class="absolute text-white tracking-wider w-full" :style="{top: system.menuBtnTop + 'px'}">
				<view class="mb-4">
					<view class="text-center text-lg font-black flex items-center justify-center" :class="{'fixed w-full top-0 bg-theme z-20 transition duration-300': titleScrollShow}"
					   style="min-height: 32px;" :style="{'padding-top': (titleScrollShow? system.menuBtnTop:0) + 'px', 'padding-bottom': (titleScrollShow? 6:0) + 'px'}"
					   v-text="title"></view>
				    <view v-if="needSearch" class="flex items-center mx-4 mt-5">
						<view v-if="needLocate" class="flex items-center mr-2" @click="areaObj.show = true">
							<i class="iconfont icon-dingwei mr-1"></i>
							<text class="text-sm" v-text="areaObj.name"></text>
						</view>
						<view class="flex-1" @click="goSearchPage">
							<u-input :border="border" :disabled="inputDisabled" :clearable="true" placeholder="搜索你想要查找的信息" placeholder-style="color:#cccccc;font-size:14px;"
								:custom-style="{backgroundColor: '#ffffff',paddingLeft: '12px',borderRadius: '36px'}"
								@clear="$emit('searchComfirm', '')" @confirm="$emit('searchComfirm', $event)" />
						</view>
					</view>
				</view>
				<slot></slot>
			</view>
			<area-select v-if="needLocate" v-model="areaObj.show" :contentHeight="areaObj.contentHeight" @areaSelect="areaSelect"></area-select>
		</template>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import areaSelect from '@/components/area_select.vue'
	export default {
		components: {
			areaSelect
		},
		props: {
			type: {
				type: String,
				default: 'normal'
			},
			bgColor: {
				type: String,
				default: '#46e4fd'
			},
			// type: noHeader 开始
			needSearch: {// 显示查询框
				type: Boolean,
				default: false
			},
			needLocate: {// 显示定位
				type: Boolean,
				default: false
			},
			titleScrollShow: {// 固定标题
				type: Boolean,
				default: false
			},
			inputDisabled: {
				type: Boolean,
				default: true
			},
			inputNavigateUrl: {
				type: String,
				default: ''
			},
			// type: noHeader 结束
			title: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				//bgUrl: this.$config.server_pic_url + 'bg_green.png',
				bgUrl: '/static/common/bg.png',
				areaObj: {
					show: false,
					name: '全部',
					contentHeight: 0
				},
			}
		},
		computed: {
			...mapState({
				system: state => state.system
			})
		},
		mounted() {
			const v = this
			if (v.system.areaName) {
				 v.areaObj.name = v.system.areaName
			}
			v.areaObj.contentHeight = v.system.pageHeight - (v.system.statusBarHeight? v.system.statusBarHeight:44) - 98
		},
		methods: {
			leftClick () {
				const pages = getCurrentPages()
				let mapUrl = 'pages_home/treat',legalUrl = 'pages_employ/legal_aid'
				if ((pages.route && pages.route == mapUrl) || (pages instanceof Array && pages[pages.length - 1].route == mapUrl)) {
					uni.switchTab({
						url: '/pages/home/index'
					})
				}else if ((pages.route && pages.route == legalUrl) || (pages instanceof Array && pages[pages.length - 1].route == legalUrl)) {
					uni.switchTab({
						url: '/pages/employ/index'
					})
				}else {
					uni.navigateBack()
				}
			},
			areaSelect(e) {
				this.areaObj.name = e.areaName
				this.$emit("areaChange", e)
			},
			goSearchPage () {
				if (this.inputDisabled && this.inputNavigateUrl) {
					this.$util.myNavigateTo(this.inputNavigateUrl)
				}
			}
		}
	}
</script>

<style>

</style>
